<script>
  import sheep from '@/sheep';

  export default {
    name: 's-login-popup',
    computed: {
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    methods: {
      openPopup() {
        this.$nextTick(() => {
          this.$refs.loginPopup.open();
          this.$emit('openPopup')
        });
      },
      closePopup() {
        this.$refs.loginPopup.close();
        // uni.$emit('closeLoginPopup')
      },
      confirm() {
        this.$emit('confirm');
      },
    },
  };
</script>

<template>
  <uni-popup ref="loginPopup" :mask-click="false" :maskBackgroundColor="'rgba(0,0,0,0.6)'">
    <view class="flex align-center justify-center" :style="{
      width:'750rpx',
      height:'100vh',
      background:'transparent'
    }">
      <view class="loginPopup flex flex-column align-center">
        <view class="wh_630 flex align-center justify-between" style="margin-top: -45rpx;">
          <image style="width: 346rpx;height: 191rpx;" :src="`${IMG_URL}/index/login_background_header.png`"></image>
          <view class="welfareCenter flex align-center justify-center" @click.stop="confirm">
            <image style="width: 27rpx;height: 27rpx;" :src="`${IMG_URL}/index/login_gift_background.png`"></image>
            <view class="text ml_8">福利中心</view>
          </view>
        </view>
        <view class="wh_630 ml_30 mr_30 content_login">
          <view class="top">欢迎来到
            <text style="color:#FF4206;">拾亲</text>
            大家庭
          </view>
          <view class="bottom">再小的家庭 也可以有传承</view>
        </view>
        <view class="hW_20"></view>
        <view class="button_login ml_30 mr_30 wh_630 flex justify-between align-center">
          <view class="left flex align-center justify-center" @click.stop="confirm">
            <image style="width: 172rpx;" mode="widthFix" :src="`${IMG_URL}/index/login_background_text.png`"></image>
          </view>
          <view class="right flex align-center justify-center" style="margin-right: 71rpx;" @click.stop="closePopup">
            暂不登录
          </view>
        </view>
        <view class="wh_630"></view>
        <view class="wh_630 ml_30 mr_30 tips_login ml_15">登录后获取更多精彩内容</view>
      </view>
    </view>
  </uni-popup>
</template>

<style scoped lang="scss">
  .loginPopup {
    width: 690rpx;
    height: 388rpx;
    background: url($uni-bg-url-sq + '/index/login_background_popup.png') no-repeat;
    background-size: 690rpx 388rpx;
    //background: #ede9e1;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    position: relative;
    //padding: 25rpx 30rpx;
  }

  .welfareCenter {
    width: 142rpx;
    height: 49rpx;
    background: #FF4206;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    border: 2rpx solid #FF7950;

    .text {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 23rpx;
      color: #FFFFFF;
    }
  }

  .content_login {
    .top {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 37rpx;
      color: #454545;
    }

    .bottom {
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 22rpx;
      color: #acacac;
    }
  }

  .button_login {
    .left {
      width: 246rpx;
      height: 87rpx;
      background: #FF4206;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
    }

    .right {
      width: 170rpx;
      height: 60rpx;
      border-radius: 8rpx 8rpx 8rpx 8rpx;
      border: 2rpx solid #C1C1C1;
      font-family: Source Han Sans CN, Source Han Sans CN;
      font-weight: 500;
      font-size: 29rpx;
      color: #9F9F9F;
    }
  }

  .tips_login {
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 500;
    font-size: 22rpx;
    color: #454545;
  }

  :deep(.uni-popup) {
    background-color: rgba(0, 0, 0, 0.4);
  }
</style>